<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  过滤器可用与 插值表达式和v-bind属性绑定  -->
<div id="app">
    <p>message的值：{{ message | capi }}</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        filters: {
            // 过滤器函数形参的val，永远都是管道符前面的那个值
            capi(val) {
                // 字符串中的charAt方法，这个方法接受索引值，表示从字符串中把索引对应的字符，获取出来
                const first = val.charAt(0).toUpperCase()
                // 字符串中的slice方法，可以截取字符串，从指定索引往后截取
                const other = val.slice(1)
                // 过滤器一定要有返回值
                return first + other
            }
        }
    })
</script>
</body>
</html>